import React, { useEffect, useState } from 'react';
import { Row, Col, Icon, Input, Menu, Breadcrumb } from 'antd';
import AxCard from '@/components/AxBase/AxCard';
import style from './style.less';
import { AxPanelSumProps } from './data';
import { AxButton } from '@/components/AxBase';
import './style.css';
import { router } from 'umi';
import { ChartColumn, ChartDonut } from '@/components/AxBase/AxChart';

const Search = Input.Search;
const { SubMenu } = Menu;
const AxPanelSum: React.FC<AxPanelSumProps> = props => {
    const { name, greet, desc, statistics = [] } = props;

    return (
        <AxCard style={{ marginBottom: '15px', height: 170 }}>
            <Row>
                <Col span={20}>
                    <p className={style.title_user}>
                        <Icon type="user" className={style.title_instructor} />
            &nbsp;{greet}&nbsp;<span className={style.instructor}>{name}</span>
                    </p>
                </Col>
                <Col span={4}>
                    <AxButton className="ax-no-class" shape="round">
                        申请加入单位
          </AxButton>
                </Col>
            </Row>
        </AxCard>
    );
};

const AxPanelSum2: React.FC<AxPanelSumProps> = props => {
    return (
        <AxCard style={{ marginBottom: '15px', height: 170 }} onClick={() => router.push('/buyer/lab/inventory/init/data')}>
            <Row gutter={15} style={{ marginBottom: '25px' }}>
                <Col span={20}>
                    <p className={style.title_user}>
                        <Icon type="user" className={style.title_instructor} />&nbsp;库存初期盘点
                    </p>
                </Col>
                {/* <Col span={4}>
                    <AxButton className='ax-no-class' style={{ float: 'left', height: 24 }} type='link'>库存领用记录</AxButton>
                </Col> */}
            </Row>
            <Row gutter={15}>
                <Col span={8}>
                    <div className={style.statistics_box}>
                        <p className={style.statistics_value}>8</p>
                        <p>立即盘点</p>
                    </div>
                </Col>
                <Col span={8}>
                    <div className={style.statistics_box}>
                        <p className={style.statistics_value}>8</p>
                        <p>盘点审核中</p>
                    </div>
                </Col>
                <Col span={8}>
                    <div className={style.statistics_box}>
                        <p className={style.statistics_value}>8</p>
                        <p>已盘点</p>
                    </div>
                </Col>
            </Row>
        </AxCard>
    );
};

const AxPanelSum3: React.FC<AxPanelSumProps> = props => {
    return (
        <AxCard style={{ marginBottom: '15px', height: 170 }} onClick={() => router.push('/buyer/lab/inventory/catalogue/data')}>
            <Row gutter={15} style={{ marginBottom: '25px' }}>
                <Col span={20}>
                    <p className={style.title_user}>
                        <Icon type="user" className={style.title_instructor} />&nbsp;库存目录管理
                    </p>
                </Col>
            </Row>
            <Row gutter={15}>
                <Col span={8}>
                    <div className={style.statistics_box}>
                        <p className={style.statistics_value}><a>8</a></p>
                        <p>目录条数</p>
                    </div>
                </Col>
                <Col span={8}>
                    <div className={style.statistics_box}>
                        <AxButton className='ax-no-class' style={{ float: 'left', height: 24 }} type='link'>调整目录</AxButton>
                    </div>
                </Col>
                <Col span={8}>
                    <div className={style.statistics_box}>
                        <AxButton className='ax-no-class' style={{ float: 'left', height: 24 }} type='link'>审核记录</AxButton>
                    </div>
                </Col>
            </Row>
        </AxCard>
    )
}

const AxPanelSum4: React.FC<AxPanelSumProps> = props => {
    return (
        <AxCard style={{ marginBottom: '15px', height: 170 }} onClick={() => router.push('/buyer/lab/inventory/goods/data')}>
            <Row gutter={15} style={{ marginBottom: '25px' }}>
                <Col span={20}>
                    <p className={style.title_user}>
                        <Icon type="user" className={style.title_instructor} />&nbsp;物资管理
                    </p>
                </Col>
            </Row>
            <Row gutter={15}>
                <Col span={12}>
                    <div className={style.statistics_box}>
                        <p className={style.statistics_value}><a>8</a></p>
                        <p>物资数量</p>
                    </div>
                </Col>
                <Col span={12}>
                    <div className={style.statistics_box}>
                        <AxButton className='ax-no-class' style={{ float: 'left', height: 24 }} type='link'>物资记录</AxButton>
                    </div>
                </Col>
            </Row>
        </AxCard>
    )
}

const AxPanelSum5: React.FC<AxPanelSumProps> = props => {
    return (
        <AxCard style={{ marginBottom: '15px', height: 170 }} onClick={() => router.push('/buyer/lab/inventory/out/apply')}>
            <Row gutter={15} style={{ marginBottom: '25px' }}>
                <Col span={24}>
                    <p className={style.title_user}>
                        <Icon type="user" className={style.title_instructor} />&nbsp;出库管理
                    </p>
                </Col>
            </Row>
            <Row gutter={15}>
                <Col span={12}>
                    <div className={style.statistics_box}>
                        <AxButton className='ax-no-class' style={{ float: 'left', height: 24 }} type='link'>出库</AxButton>
                    </div>
                </Col>
                <Col span={12}>
                    <div className={style.statistics_box}>
                        <AxButton className='ax-no-class' style={{ float: 'left', height: 24 }} type='link'>出库记录</AxButton>
                    </div>
                </Col>
            </Row>
        </AxCard>
    )
}

const AxPanelSum6: React.FC<AxPanelSumProps> = props => {
    return (
        <AxCard style={{ marginBottom: '15px', height: 170 }} onClick={() => router.push('/buyer/lab/inventory/back/data')}>
            <Row gutter={15} style={{ marginBottom: '25px' }}>
                <Col span={24}>
                    <p className={style.title_user}>
                        <Icon type="user" className={style.title_instructor} />&nbsp;返库管理
                    </p>
                </Col>
            </Row>
            <Row gutter={15}>
                <Col span={8}>
                    <div className={style.statistics_box}>
                        <p className={style.statistics_value}>8</p>
                        <p>待返库</p>
                    </div>
                </Col>
                <Col span={8}>
                    <div className={style.statistics_box}>
                        <AxButton className='ax-no-class' style={{ float: 'left', height: 24 }} type='link'>返库</AxButton>
                    </div>
                </Col>
                <Col span={8}>
                    <div className={style.statistics_box}>
                        <AxButton className='ax-no-class' style={{ float: 'left', height: 24 }} type='link'>返库记录</AxButton>
                    </div>
                </Col>
            </Row>
        </AxCard>
    )
}

const AxPanelSum7: React.FC<AxPanelSumProps> = props => {
    return (
        <AxCard style={{ marginBottom: '15px', height: 170 }} onClick={() => router.push('/buyer/lab/inventory/noplatform/apply')}>
            <Row gutter={15} style={{ marginBottom: '25px' }}>
                <Col span={24}>
                    <p className={style.title_user}>
                        <Icon type="user" className={style.title_instructor} />&nbsp;非平台采购入库
                    </p>
                </Col>
            </Row>
            <Row gutter={15}>
                <Col span={6}>
                    <div className={style.statistics_box}>
                        <p className={style.statistics_value}>8</p>
                        <p>记录条数</p>
                    </div>
                </Col>
                <Col span={6}>
                    <div className={style.statistics_box}>
                        <p className={style.statistics_value}>8</p>
                        <p>物资数量</p>
                    </div>
                </Col>
                <Col span={6}>
                    <div className={style.statistics_box}>
                        <AxButton className='ax-no-class' style={{ float: 'left', height: 24 }} type='link'>入库</AxButton>
                    </div>
                </Col>
                <Col span={6}>
                    <div className={style.statistics_box}>
                        <AxButton className='ax-no-class' style={{ float: 'left', height: 24 }} type='link'>入库记录</AxButton>
                    </div>
                </Col>
            </Row>
        </AxCard>
    )
}

const AxPanelSum8: React.FC<AxPanelSumProps> = props => {
    return (
        <AxCard style={{ marginBottom: '15px', height: 170 }} onClick={() => router.push('/buyer/lab/inventory/scrap/apply')}>
            <Row gutter={15} style={{ marginBottom: '25px' }}>
                <Col span={24}>
                    <p className={style.title_user}>
                        <Icon type="user" className={style.title_instructor} />&nbsp;报废品登记
                    </p>
                </Col>
            </Row>
            <Row gutter={15}>
                <Col span={6}>
                    <div className={style.statistics_box}>
                        <p className={style.statistics_value}>8</p>
                        <p>记录条数</p>
                    </div>
                </Col>
                <Col span={6}>
                    <div className={style.statistics_box}>
                        <p className={style.statistics_value}>8</p>
                        <p>物资数量</p>
                    </div>
                </Col>
                <Col span={6}>
                    <div className={style.statistics_box}>
                        <AxButton className='ax-no-class' style={{ float: 'left', height: 24 }} type='link'>入库</AxButton>
                    </div>
                </Col>
                <Col span={6}>
                    <div className={style.statistics_box}>
                        <AxButton className='ax-no-class' style={{ float: 'left', height: 24 }} type='link'>入库记录</AxButton>
                    </div>
                </Col>
            </Row>
        </AxCard>
    )
}

const AxPanelSum9: React.FC<AxPanelSumProps> = props => {
    return (
        <AxCard style={{ marginBottom: '15px', height: 170 }} onClick={() => router.push('/buyer/lab/inventory/addr/data')}>
            <Row gutter={15} style={{ marginBottom: '25px' }}>
                <Col span={24}>
                    <p className={style.title_user}>
                        <Icon type="user" className={style.title_instructor} />&nbsp;地址管理
                    </p>
                </Col>
            </Row>
        </AxCard>
    )
}

const AxPanelSum10: React.FC<AxPanelSumProps> = props => {
    return (
        <AxCard style={{ marginBottom: '15px', height: 170 }} onClick={() => router.push('/buyer/lab/inventory/user/data')}>
            <Row gutter={15} style={{ marginBottom: '25px' }}>
                <Col span={24}>
                    <p className={style.title_user}>
                        <Icon type="user" className={style.title_instructor} />&nbsp;人员管理
                    </p>
                </Col>
            </Row>
        </AxCard>
    )
}

const InstructorCenter: React.FC<any> = props => {
    let axconfig: any = {
        data: [],
        title: {
            visible: true,
            text: '库存概览图',
        },
        description: {
            visible: true,
            text: '可直观所有库存数量',
        }
    };
    const [config, setConfig] = useState(axconfig);
    const [config2, setConfig2] = useState(axconfig);

    useEffect(() => {
        getChartData()
    }, []);

    useEffect(() => {
        setConfig2({
            data: [
                { text: '库存目录', value: 11 },
                { text: '物资数量', value: 22 },
                { text: '出库数量', value: 33 },
                { text: '非采购数量', value: 44 },
                { text: '报废数量', value: 55 }
            ],
            title: {
                visible: true,
                text: '库存柱状图',
            },
            description: {
                visible: true,
                text: '可直观所有库存数量',
            }
        });
    }, [])

    const getChartData = () => {
        let data = [
            { text: '库存目录', value: 1 },
            { text: '物资数量', value: 2 },
            { text: '出库数量', value: 3 },
            { text: '返库数量', value: 4 },
            { text: '非采购数量', value: 5 },
            { text: '报废数量', value: 6 }
        ];
        axconfig.data = data
        setConfig(axconfig);
    }
    let userName: any = 'Bill';//JSON.parse(userInfo).userName

    /**头部数据 */
    const data: AxPanelSumProps = {
        name: userName,
        greet: '欢迎您',
        desc: '欢迎来到辅导员可视中心,在这里你可以查询到你想要的有效信息！',
        statistics: [
            {
                name: '管理班级数',
                total: 8,
            },
            {
                name: '管理人数',
                total: 425,
            },
        ],
    };

    return (
        <AxCard
            title={
                <Breadcrumb separator=">">
                    <Breadcrumb.Item>采购主体名称（采购主体地址）</Breadcrumb.Item>
                    <Breadcrumb.Item>库存管理</Breadcrumb.Item>
                </Breadcrumb>
            }
            bodyStyle={{ backgroundColor: 'rgb(240,242,245)' }}
        >
            <Row gutter={15}>
                <Col span={16}>
                    <Row gutter={15}>
                        <Col span={8}>
                            <AxPanelSum2 {...data} />
                        </Col>
                        <Col span={8}>
                            <AxPanelSum3 {...data} />
                        </Col>
                        <Col span={8}>
                            <AxPanelSum4 {...data} />
                        </Col>
                        <Col span={8}>
                            <AxPanelSum5 {...data} />
                        </Col>
                        <Col span={8}>
                            <AxPanelSum6 {...data} />
                        </Col>
                        <Col span={8}>
                            <AxPanelSum7 {...data} />
                        </Col>
                        <Col span={8}>
                            <AxPanelSum8 {...data} />
                        </Col>
                        <Col span={8}>
                            <AxPanelSum9 {...data} />
                        </Col>
                        <Col span={8}>
                            <AxPanelSum10 {...data} />
                        </Col>
                    </Row>
                </Col>
                <Col span={8}>
                    <Row gutter={15}>
                        <Col span={24}>
                            <AxCard title='统计信息'>
                                <div style={{ padding: '8px 0' }}>
                                    <ChartDonut config={config} />
                                </div>
                            </AxCard>
                        </Col>
                    </Row>
                    <Row gutter={15}>
                        <Col span={24}>
                            <AxCard>
                                <ChartColumn config={config2} />
                            </AxCard>
                        </Col>
                    </Row>
                </Col>
            </Row>
        </AxCard>
    );
};

export default InstructorCenter;
